<template>
    <div>
        <el-dialog v-model="historyModal" width="80%" class="tsDialog" align-center destroy-on-close draggable>
            <template #header="{ close }">
                <div class="dialog-header flex justify-between items-center">
                    <div>历史申报</div>
                    <el-icon class="el-icon--left cursor-pointer" @click="close">
                        <CircleCloseFilled color="#fff" />
                    </el-icon>
                </div>
            </template>
            <div>
                <!-- 基本信息 -->
                <div class="bg-white mt-[10px] p-[10px]">
                    <el-form :model="searchForm" class="mt-[20px] pt-[20px]" label-width="110px">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item label="成果名称" class="mb-[0px]">
                                    <el-input v-model="searchForm.productName" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="完成人姓名" class="mb-[0px]">
                                    <el-input v-model="searchForm.authorName" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="申请日期">
                                    <!-- <el-date-picker v-model="searchForm.applyDate" type="date" format="YYYY/MM/DD"
                                        value-format="YYYY-MM-DD" /> -->
                                    <!-- <CommonDateSelect placeholder="申报开始日期" v-model:beginTime="searchForm.applyDateStart"
                                        v-model:endTime="searchForm.applyDateEnd"
                                        v-model:dateformat="searchForm.dateFormat" /> -->
                                    <el-date-picker v-model="valueDate1" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
                                        type="daterange" range-separator="至" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <div class="flex justify-end">
                                    <el-button type="primary" @click="searchFormOpen = !searchFormOpen">更多
                                        <el-icon color="#fff">
                                            <CaretTop v-show="searchFormOpen" />
                                            <CaretBottom v-show="!searchFormOpen" />
                                        </el-icon>
                                    </el-button>
                                    <el-button type="primary" @click="getList(1)">查询</el-button>
                                    <el-button @click="reset">重置</el-button>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="mb-[20px]" v-show="searchFormOpen">

                            <el-col :span="6">
                                <el-form-item label="奖励状态" class="mb-[0px]">
                                    <CustomTreeSelect placeholder="奖励状态" v-model="searchForm.honorState" valueKey="code"
                                        labelKey="name" :isFetch="false" :dataList="hjztList" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="所属单位">
                                    <CustomTreeSelect placeholder="所属单位" v-model="searchForm.unitId"
                                        valueKey="codeColumn" labelKey="valueColumn" :isFetch="false"
                                        :dataList="isKyms ? msDwArr : zcgsdwList" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="学科名称">
                                    <CustomTreeSelect placeholder="学科名称" v-model="searchForm.subjectId" valueKey="id"
                                        labelKey="label" :isFetch="false" :dataList="kjxkflList" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="完成单位" class="mb-[0px]">
                                    <el-input v-model="searchForm.completeUnit" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="成果形式" class="mb-[0px]">
                                    <el-input v-model="searchForm.productMode" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="审核状态" class="mb-[0px]">
                                    <CustomTreeSelect placeholder="审核状态" v-model="searchForm.checkstatus"
                                        valueKey="code" labelKey="name" :isFetch="false" :dataList="shztList" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-table :data="tableData" class="w-full" @selection-change="handleSelectionChange" stripe>
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="productName" label="成果名称">
                            <template #default="scope">
                                <el-link type="primary" @click="viewItem(scope.row)">{{ scope.row.productName
                                    }}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="inventorNames" label="所有完成人">
                            <template #default="scope">
                                <span v-for="(item, index) in scope.row.authorList1" :key="item.id">
                                    <el-link type="primary" v-if="item.id != '3'" @click="openpeopledetails(item)">{{
            item.name
        }}<span v-if="index + 1 != scope.row.authorList1.length">,</span></el-link>
                                    <span type="primary" v-else>{{
            item.name
        }}<span v-if="index + 1 != scope.row.authorList1.length">,</span></span>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="applyDate" label="申请日期" />
                        <el-table-column prop="honorState" label="获奖状态"> <template #default="scope">
                                <Feedback :id="scope.row.honorState" :list="hjztist">
                                </Feedback>
                            </template>
                        </el-table-column>
                        <el-table-column prop="unitId" label="所属部门">
                            <template #default="scope">
                                <Feedback :id="scope.row.unitId" :list="zcgsdwList"
                                    :mapping="['codeColumn', 'valueColumn']">
                                </Feedback>
                            </template>
                        </el-table-column>

                        <el-table-column prop="selectExpert" label="已选专家" />
                        <el-table-column prop="reviewMark" label="评审进度">
                            <template #default="scope">
                                <el-progress :text-inside="true" :stroke-width="26"
                                    :percentage="(Number(scope.row.submitNum) + Number(scope.row.noSubmitNum)) != 0 ? Number(scope.row.submitNum) / (Number(scope.row.submitNum) + Number(scope.row.noSubmitNum)) * 100 : 0" /></template>
                        </el-table-column>
                        <el-table-column prop="checkstatus" label="审核状态"> <template #default="scope">
                                <Feedback :id="scope.row.checkstatus" :list="shztList">
                                </Feedback>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column fixed="right" label="操作" align="center">
                            <template #default="scope">
                                <el-button type="primary" size="small" plain @click="handleEdit(scope.row)">
                                    编辑
                                </el-button>
                            </template>
                        </el-table-column> -->
                    </el-table>
                    <div class="mt-[20px] flex justify-end" style="margin-bottom: 20px;">
                        <pagination v-show="total > 0" :total="total" v-model:page="pageInfo.pageNum"
                            v-model:limit="pageInfo.pageSize" @pagination="getList" />
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
    <historyView v-model="ViewdialogVisible" ref="viewModalRef" :hjztList="hjztList" :hjjbList="hjjbList"
        :zcgsdwList="zcgsdwList" :sydwList="sydwList" :kjxkflList="kjxkflList" :xlList="xlList" :zcList="zcList" />
    <detailEdit v-model="editModelVisible" ref="EditModalRef" :hjztList="hjztList" :hjjbList="hjjbList"
        :zcgsdwList="zcgsdwList" :sydwList="sydwList" :kjxkflList="kjxkflList" :xlList="xlList" :zcList="zcList"
        @callBack="callBackFun" />
    <peopleDetails :activ="activ" :obj="obj" @close-dialog="activ = false"></peopleDetails>
</template>
<script setup>

import { onMounted } from 'vue';
import { useRouter, useRoute } from "vue-router";
import { gethonorApplyBookList, honorApplyBookDel, gethonorApplyBookInfo } from "@/api/achievement/cghj"
import { honorApplyBookHistory } from "@/api/achievement/staff"
import historyView from "./historyView.vue";
import useCategoryStore from "@/store/modules/category";
import Cookies from 'js-cookie'
import CustomTreeSelect from "@/views/project/components/CustomTreeSelect.vue";
import useUserStore from "@/store/modules/user";
import detailEdit from "./detailEdit.vue";
import CommonDateSelect from "@/views/achievement/components/CommonDateSelect";
import peopleDetails from '@/components/peopleDetails/peopleDetails.vue'

const historyModal = defineModel();

const userStore = useUserStore();

const categoryStore = useCategoryStore();
const { hjjbList, hjztList, zcgsdwList, shztList, kjxkflList, xlList, zcList, hjztist,
    sydwList } = storeToRefs(categoryStore); // 解构状态
const { gethjjbList, gethjztList, getzcgsdwList, getshztList, getkjxkflList, getxlList, getzcList, gethjztist, getsydwList } = categoryStore; // 解构方法

const route = useRoute();
const searchFormOpen = ref(false);
const ViewdialogVisible = ref(false);
const editModelVisible = ref(false);

const EditModalRef = ref(null)
//点击编辑
const handleEdit = (i) => {
    gethonorApplyBookInfo(i.id).then(res => {
        if (res.code == 200) {
            editModelVisible.value = true;
            EditModalRef.value.getRuleForm(res.data)
        }
    })
};

const searchForm = ref({
    applyInfoId: "",
    productName: "",
    authorName: "",
    applyDateStart: "",
    applyDateEnd: "",
    dateFormat: "yyyy-MM-dd",
    honorState: [],
    unitId: [],
    checkstatus: [],
    productMode: "",
    completeUnit: "",
    subjectId: [],
});
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10
})
const total = ref(0)
const tableData = ref([])
const msDwArr = ref([])

const viewModalRef = ref(null)
const viewItem = (i) => {
    gethonorApplyBookInfo(i.id).then(res => {
        if (res.code == 200) {
            ViewdialogVisible.value = true;
            viewModalRef.value.getRuleForm(res.data)
        }
    })
};
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
const initList = () => {
    getList()
}
const reset = () => {
    searchForm.value = {
        applyInfoId: "",
        productName: "",
        authorName: "",
        applyDateStart: "",
        applyDateEnd: "",
        honorState: [],
        unitId: [],
        checkstatus: [],
        productMode: "",
        completeUnit: "",
        subjectId: [],
    }
    valueDate1.value = ''
}
const valueDate1 = ref('')
const getList = async (i) => {
    if (i == 1) {
        pageInfo.value.pageNum = 1
    }
    if (valueDate1.value && valueDate1.value.length) {
        searchForm.value.applyDateStart = valueDate1.value[0]
        searchForm.value.applyDateEnd = valueDate1.value[1]
    } else {
        searchForm.value.applyDateStart = ''
        searchForm.value.applyDateEnd = ''
    }
    let parms = {
        ...searchForm.value,
        ...pageInfo.value
    }
    parms.unitId = searchForm.value.unitId.join(",")
    parms.checkstatus = searchForm.value.checkstatus.join(',')
    parms.honorState = searchForm.value.honorState.join(',')
    parms.subjectId = searchForm.value.subjectId.join(',')
    // if (isKyms.value && (parms.unitId == '' || parms.unitId == null || parms.unitId == undefined || parms.unitId == [])) {
    //     parms.unitId = msDwArr.value.map(item => item.codeColumn).join(",")
    // }
    let res = await honorApplyBookHistory(parms)
    if (res.code == 200) {
        tableData.value = res.rows
        total.value = res.total
        tableData.value.forEach(item => {
            if (item.authornames && item.authorpids) {
                let zcNameArr = item.authornames.split(',')
                let zcNameArr1 = item.authorpids.split(',')
                let zcNameArr2 = zcNameArr.map((val, index) => {
                    return {
                        name: val,
                        id: zcNameArr1[index]
                    }
                })
                Reflect.set(item, 'authorList1', zcNameArr2)
            }
        })
        console.log(tableData.value)
    }
}
const callBackFun = () => {
    getList()
}
const isKyms = ref(false)

///查看详情
const activ = ref(false)
const obj = ref('')
const openpeopledetails = function (row) {
    obj.value = row.id
    activ.value = true
}


onMounted(() => {
    if (Cookies.get("role-key") == 'biz_kyms') {
        isKyms.value = true
    } else {
        isKyms.value = false
    }
    if (!hjjbList.value.length) {
        gethjjbList()
    }
    if (!hjztList.value.length) {
        gethjztList()
    }
    if (!shztList.value.length) {
        getshztList()
    }
    if (!kjxkflList.value.length) {
        getkjxkflList()
    }
    if (!xlList.value.length) {
        getxlList()
    }
    if (!zcList.value.length) {
        getzcList()
    }
    if (!hjztist.value.length) {
        gethjztist()
    }
    // if (isKyms.value) {
    //     if (!zcgsdwList.value.length) {
    //         getzcgsdwList().then(res => {
    //             if (res.code == 200) {
    //                 msDwArr.value = []
    //                 let msdwArr = userStore.unitAdminScopeReal.split(',')
    //                 res.data.forEach(item => {
    //                     if (msdwArr.includes(item.codeColumn)) {
    //                         msDwArr.value.push(item)
    //                     }
    //                 })
    //                 initList()
    //             }
    //         })
    //     } else {
    //         msDwArr.value = []
    //         let msdwArr = userStore.unitAdminScopeReal.split(',')
    //         zcgsdwList.value.forEach(item => {
    //             if (msdwArr.includes(item.codeColumn)) {
    //                 msDwArr.value.push(item)
    //             }
    //         })
    //         initList()
    //     }
    // } else {

    // }
    if (!zcgsdwList.value.length) {
        getzcgsdwList()
    }
    if (!sydwList.value.length) {
        getsydwList();
    }

    initList()
});
</script>
<style lang="scss">
.gdlable {
    width: 140px;
}
</style>
<style scoped lang="scss">
// @import url("@/views/achievement/index.scss");

:deep(.el-select--default) {


    .el-select__wrapper.is-disabled {
        background-color: #fff;
        box-shadow: 0 0 0 0px var(--el-select-disabled-border) inset;
        color: #606266;
        cursor: not-allowed;

        .el-select__selected-item {
            color: #606266;
        }
    }

    .el-select__suffix {
        display: none;
    }
}

:deep(.el-descriptions) {
    .el-descriptions__content {
        width: auto !important;

    }
}

:deep(.tsDialog) {

    padding: 0;
    background-color: #f0f2f5;
    height: 90vh;
    overflow-y: hidden;

    .dialog-header {
        background: #409eff;
        color: #fff;
        height: 40px;
        padding: 0 10px;
    }

    .el-dialog__header {
        padding: 0;
    }

    .el-dialog__body {
        height: calc(100% - 40px);
        overflow: auto;
        padding-bottom: 55px;
    }

    .dialog-footer {
        background: #fff;
        padding: 5px 0;
        border-top: 1px solid #ddd;

        .operate-btns {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }




}
</style>